/*
 * @Date: 2023-04-27 17:29:00
 * @LastEditors: jacky02
 * @LastEditTime: 2023-04-27 20:39:21
 */
// eslint-disable-next-line no-unused-vars
import React, { useEffect, useState } from "react";
import { Menu } from "antd";
// eslint-disable-next-line no-unused-vars
import GrahpinC, { Utils, Behaviors, GraphinContext } from "@antv/graphin";

const Grahpin = () => {
  const [state, setState] = useState({
    data: null,
  });
  const [type, setType] = useState("network");
  const items = [
    {
      label: "网图",
      key: "network",
    },
    {
      label: "树图",
      key: "tree",
    },
  ];
  //网图
  const { TreeCollapse, FitView, DragCanvas } = Behaviors;
  const data2 = Utils.mock(10).circle().graphin();
  const shouldBegin = () => {
    return true;
  };
  //开启后fitCenter啥的都没用，没法居中
  //   const FocusItem = () => {
  //     const { graph } = React.useContext(GraphinContext);
  //     useEffect(() => {
  //       graph.focusItem("node-3", true);
  //       graph.setItemState("node-3", "selected", true);
  //     // eslint-disable-next-line react-hooks/exhaustive-deps
  //     }, []);
  //     return null;
  //   };
  //树图
  const walk = (node, callback) => {
    callback(node);
    if (node.children && node.children.length !== 0) {
      node.children.forEach((n) => {
        walk(n, callback);
      });
    }
  };

  function tree() {
    fetch(
      "https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json"
    )
      .then((res) => res.json())
      .then((res) => {
        walk(res, (node) => {
          node.style = {
            label: {
              value: node.id, // add label
            },
          };
        });
        setState({
          data: res,
        });
      });
  }
  function onClick({ key }) {
    setType(key);
    if (key === "tree") tree();
  }

  const { data } = state;

  return (
    <>
      <div className="menu">
        <Menu
          onClick={onClick}
          defaultSelectedKeys={["network"]}
          mode="horizontal"
          items={items}
        />
      </div>
      {type === "network" && data2 && (
        <GrahpinC
          data={data2}
          layout={{
            type: "concentric",
            minNodeSpacing: 50,
          }}
          width={1000}
          height={600}
        >
          <FitView />
          {/* <ZoomCanvas disabled /> */}
          {/* <FocusItem /> */}
          <DragCanvas shouldBegin={shouldBegin} />
        </GrahpinC>
      )}

      {type === "tree" && data && (
        <GrahpinC
          data={data}
          width={1000}
          height={600}
          fitView
          layout={{
            type: "compactBox",
            direction: "TB",
            getId: function getId(d) {
              return d.id;
            },
            getHeight: function getHeight() {
              return 16;
            },
            getWidth: function getWidth() {
              return 16;
            },
            getVGap: function getVGap() {
              return 80;
            },
            getHGap: function getHGap() {
              return 50;
            },
          }}
        >
          {/* <FitView /> */}
          <TreeCollapse trigger="click" />
        </GrahpinC>
      )}
    </>
  );
};

export default Grahpin;
